<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入本地的vue.js文件-->
    <script src="../js/vue2.js"></script>
</head>
<body>
<!--
    实现事件的绑定
      v-on:事件名 = 函数名    -> 简化事件的绑定  @事件名
     函数的定义  methods
-->
<div id="app">
    <span>{{number}}</span>
    <p>
        <button v-on:click="sub(2)">-2</button>
        <button  @click="add(10)">+10</button>
    </p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            number: 1,
            age: 20
        },
        methods: {
            sub: function (step) {
                // console.log("sub")
                // console.log(this)
                // console.log(vm)
                // console.log(vm == this)  // 函数中使用this关键词  指代的就是vm实例
                // console.log(vm.number)  //  get
                this.number -= step     //  set
            },
            // add:function (){
            //   // console.log("add")
            //   this.number+=1
            // }
            add(step) {
                this.number += step
            }
        }
    })

</script>

</body>
</html>